
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>自动化建表</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.8/layui/css/layui.css}">
<!--    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap.css}">-->
    <style type="text/css">
        .layui-form-label {
            width: 50px;
        }
        .layui-input-block {
            margin-left: 5px;
            min-height: 36px;
        }
        .layui-btn {
            padding: 0 12px;
        }
        .layui-btn+.layui-btn {
            margin-left: 5px;
        }
    </style>

</head>
<body>
<div class="wrapper" style="background-color: #ecf0f5;padding:15px;min-height: 914px;">
    <div class="layui-col-md12 layui-panel" style="padding: 24px;padding-top: 0px">
        <div class="layui-row layui-col-md12 test" style="margin-top: 40px">
            <form class="layui-form" lay-filter="tableData" action="">
                <div class="layui-form-item">
                    <div class="layui-inline" style="margin-left: 25px">
                        <label class="layui-form-label">表名: </label>
                        <div class="layui-inline">
                            <input id="tableName"  type="text" name="tableName" lay-verify="title" autocomplete="off" placeholder="请输入表名" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">字段名:</label>
                        <div class="layui-inline">
                            <input id="col" type="text" style="width: 800px" name="cols" lay-verify="title" autocomplete="off" placeholder="请输入字段名以逗号隔开" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="createTable" type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="addTable">创建表格</button>
                        <button id="resetBtn" type="button" class="layui-btn layui-btn-normal">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="layui-col-md12 layui-row" style="margin-top: 20px;margin-left: 60px">
            <form class="layui-form" action="">
                <span style="font-size: 16px;color: #333333">关联查询:</span>
                <div class="layui-inline ">
                    <label class="layui-form-label">表a: </label>
                    <!-- <div class="layui-inline">
                         <input id="tableNameOne"  type="text"  lay-verify="title" autocomplete="off" placeholder="请输入表名" class="layui-input">
                     </div>-->
                    <div class="layui-inline">
                        <select id="tableNameOne" name="tableNameOne" lay-filter="selectNameOne" lay-verify="required" lay-search="">
                            <option value="0">请选择表名</option>
                        </select>
                    </div>

                </div>
                <div class="layui-inline ">
                    <label class="layui-form-label">表b: </label>
                    <!-- <div class="layui-inline">
                         <input id="tableNameTwo"  type="text"  lay-verify="title" autocomplete="off" placeholder="请输入表名" class="layui-input">
                     </div>-->
                    <div class="layui-inline">
                        <select id="tableNameTwo" name="tableNameTwo" lay-filter="selectNameTwo" lay-verify="required" lay-search="">
                            <option value="0">请选择表名</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline ">
                    <label class="layui-form-label">字段a: </label>
                    <!--<div class="layui-inline">
                        <input id="tableColA"  type="text"  lay-verify="title" autocomplete="off" placeholder="请输入字段名" class="layui-input">
                    </div>-->
                    <div class="layui-inline">
                        <select id="tableFiledA" name="selectFiledA" lay-filter="tableFiledA" lay-verify="required" lay-search="">
                            <option value="0">请选择字段名</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline ">
                    <label class="layui-form-label">字段b: </label>
                    <!--<div class="layui-inline">
                        <input id="tableColB"  type="text"  lay-verify="title" autocomplete="off" placeholder="请输入字段名" class="layui-input">
                    </div>-->
                    <div class="layui-inline">
                        <select id="tableFiledB" name="selectFiledB" lay-filter="tableFiledB" lay-verify="required" lay-search="">
                            <option value="0">请选择字段名</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 0px">
                    <button  type="button" onclick="queryData()" class="layui-btn layui-btn-normal" >关联</button>
                    <button  type="button" onclick="queryDataSame()" class="layui-btn layui-btn-normal" >比对</button>
                </div>
            </form>
        </div>
        <div class="layui-row layui-col-md12" style="margin-left:60px;margin-top: 10px">
            <button  type="button" onclick="addExcel()" class="layui-btn layui-btn-normal" >导入数据</button>
        </div>
        <div class="layui-row layui-col-md12" style="margin-left:0px;" >
            <div class="layui-row tabs" style="margin-top: 20px;margin-left: 60px">
                <table class="layui-table" id="getAllTable" lay-filter="getAllTable" lay-data="{id:'getAllTable'}">
                </table>
            </div>
         <!--   <form class="layui-form" action="">
            <div class="layui-form-item ">
                <span style="font-size: 16px;color: #333333">单表查询:</span>
                <div class="layui-inline">

                    <div class="layui-input-block" id="findAllTableName"></div>

                </div>

                <div class="layui-inline" style="margin-left: 15px">
                    <button  type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="getData" >查询</button>
                    <button  type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="removeTable" >删除</button>
                    <button  type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="removeData" >清空</button>
                </div>
                &lt;!&ndash;<div class=" layui-inline" style="margin-left:20px;">
                    <button  type="button" onclick="addExcel()" class="layui-btn layui-btn-normal" >导入数据</button>
                </div>&ndash;&gt;
            </div>
            </form>-->
        </div>


      <!--  <div class="layui-row layui-col-md12" style="margin-top: 20px;margin-left: 60px">
            <span style="font-size: 20px;color: #333333">结果如下:</span>

        </div>-->

        </div>
    </div>
</div>

<!--导入数据弹出框-->
<div id="addExcelModal"style="text-align:center;width:95%;margin-left:2%;margin-top:2%;display: none">
    <form class="layui-form" action=""><table    border="0" style="border-bottom-color:#b9bdb93b;border-left:none;border-right:none;border-top:none;text-align:center;width:100%;min-width:100px;font-family:微软雅黑;font-size: 14px;line-height: 1.5;">
        <tr>
            <td style="width:20%"><h style="color: #809aa7"><span style="color:red;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span>表名：</h></td>
            <td style="width:50%" align="center">
                <div>
                    <select id="addExeclData" name="findAll" lay-filter="findAll" lay-verify="required" lay-search=""> <option value="0">请选择表名</option> </select>
                </div>
            </td>
        </tr>
        <tr>
            <td valign="top"><h style="color: #809aa7"><span style="color:red;">*</span>导入文件上传：</h></td>
            <td id="removetd">
            </td>
            </tr>
        <tr>
          <td colspan='2' id="removetdBottom">
               </td>
            </tr>
       </table></form>
   </div>
<!--查询弹出框-->
<div id="layerSelectDataByName" title="" style="display: none">
    <div class="layui-row" style="margin: 24px">
       <!-- <div class="layui-row">
            <button id="hh">导出</button>
        </div>-->
        <!--数据表格-->
        <div class="layui-row tabs" >
            <table class="layui-table" id="dataTableByName" lay-filter="dataTableByName" lay-data="{id:'dataTableByName'}">
            </table>
        </div>
    </div>
</div>
<!--比对查询弹出框-->
<div id="layerSelectDataSame" title="" style="display: none">
    <div class="layui-row" style="margin: 24px">
    <div class="layui-row tabs">
        <table class="layui-table" id="dataTable" lay-filter="tableData" lay-data="{id:'tableId'}">
        </table>
    </div>
    </div>
</div>
<!--关联查询弹出框-->
<div id="layerSelectDataDifferent" title="" style="display: none">
    <div class="layui-row" style="margin: 24px">
        <div class="layui-row layui-col-md12">
            <span style="font-size: 20px;color: #333333">表a:</span>
        </div>
        <div class="layui-row tabs">
            <table class="layui-table" id="dataTableLeft" lay-filter="dataTableLeft" lay-data="{id:'dataTableLeft'}">
            </table>
        </div>
        <div class="layui-row layui-col-md12">
            <span style="font-size: 20px;color: #333333">表b:</span>
        </div>
        <div class="layui-row">
            <table class="layui-table" id="dataTableRight" lay-filter="tableDataRight" lay-data="{id:'tableIdRight'}">
            </table>
        </div>
    </div>
</div>

<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script th:src="@{/layui-v2.6.8/layui/layui.js}"></script>
<script th:src="@{/jquery/jquery-3.6.0.js}"></script>
<script th:src="@{/jquery/common.js}"></script>

<script type="text/html" id="toolbarSelectData">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="ExportSelectData">导出</button>

    </div>
</script>

<script type="text/javascript">
    // var text
    // let UPLOAD_FILES;
    // var index = layer.load(0)
    var layer;
    var form;
    var table;
    var upload;

    layui.use(['form', 'layer','table','upload'],function(){
             form = layui.form
             upload=layui.upload
             table = layui.table;
             layer = layui.layer //表格

        table.on('toolbar(dataTableByName)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            if(obj.event === 'ExportSelectData'){
                //获取选中行
                var datas = checkStatus.data;
                if (datas.length > 0) {
                    //导出选中行
                    table.exportFile(obj.config.id, datas, 'xls');
                }else{
                    layer.msg("请选择勾选要导出的数据",{icon:5,time:2000})
                }
            }
        });

        //工具条事件
        table.on('tool(getAllTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
                console.log(data,layEvent,tr)
                var col =[]
                var param = {
                    "tableName": data.name
                }
                var callback = function(result){
                    res = result.data
                    console.log(res);
                    //console.log(res[0])
                    // col.push({type: 'checkbox', fixed: 'left'})
                    if(res.length==0){
                         layer.msg("查询表格没有数据",{icon:5,time:2000})
                        return;
                    }
                    $.each(res[0], function (index, obj) {
                        col.push({field: index, title: index,align:'center' })
                    })
                    //创建表格
                    createTable(col,data.name)
                    layer.open({
                        type:1,
                        area:['1182px','515px'],
                        fix: false,
                        maxmin: true,
                        shade: 0.6,
                        title: ["查询结果如下:"],
                        content: $("#layerSelectDataByName"),
                        success: function (res) {
                            res.find('.layui-layer-min').remove()
                        },
                        end: function (res) {
                            $('#layerSelectDataByName').css("display","none")
                        }
                    })
                }
                doLongTimeAjaxService("../auto/getAllData","json",callback,param)

            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除表么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    var param = {
                        "tableName": data.name
                    }
                    var callback = function(result){
                        var msg = result.message
                        if(result.code == 0){
                            layer.msg(msg,{icon:6,time:2000})
                        }
                    }
                    doLongTimeAjaxService("../auto/deleteTable","json",callback,param)
                });
            } else if(layEvent === 'edit'){ //清空
                //do something
                console.log(data,layEvent,tr)
                var param = {
                    "tableName" : data.name
                }
                var callback = function(result){
                    var msg = result.message
                    if(result.code == 0){
                        layer.msg(msg,{icon:6,time:2000})
                        createAllTable()
                    }
                }
                doLongTimeAjaxService("../auto/removeTableData","json",callback,param)
            }
        });

        //创建表格
        form.on('submit(addTable)', function(data){
            var data = form.val("tableData")
            if(data.tableName==''||data.cols==''){
                layer.msg("请输入完整信息",{icon:5,time:2000})
                return;
            }
            //console.log(data)
            var callback = function(result){
                var msg = result.message
                if(result.code == 0){
                    layer.msg(msg,{icon:6,time:2000})
                }
               /* $("#findAllTableName").empty();
                $("#findAllTableName").append("<option value='0' selected >" +"请选择表名"+"</option>")*/
                $("#findAllTableName").empty();
                $("#tableNameOne").empty();
                $("#tableNameOne").append("<option value='0' selected >" +"请选择表名"+"</option>")
                $("#tableNameTwo").empty();
                $("#tableNameTwo").append("<option value='0' selected >" +"请选择表名"+"</option>")
                $("#addExeclData").empty();
                $("#addExeclData").append("<option value='0' selected >" +"请选择表名"+"</option>")
                form.render("select");
                form.render("checkbox");
                initSelect()
                createAllTable()
            }
            doLongTimeAjaxService("../auto/createTable","json",callback,data);
        });

        //初始化字段b字段
        form.on('select(selectNameOne)', function (data) {
            var message=$("#tableNameOne").find("option:selected").text();
            var tableName = {
                "tableName" : message
            }
            var callback = function(result){
                res = result.data.tableFiled
                //console.log(res)
                //使用循环遍历，给下拉列表赋值
                $("#tableFiledA").empty();
                $("#tableFiledA").append("<option value='0' selected >" +"请选择字段名"+"</option>")
                $.each(res, function (index, value) {
                    $('#tableFiledA').append(new Option(value,index+1));// 下拉菜单里添加元素
                });
                layui.form.render("select");//重新渲染 固定写法
            }
            doLongTimeAjaxService("../auto/getAllTableFiled","json",callback,tableName)
        });

        //初始化字段b字段
        form.on('select(selectNameTwo)', function (data) {
            var message=$("#tableNameTwo").find("option:selected").text();
            var tableName = {
                "tableName" : message
            }
            var callback = function(result){
                res = result.data.tableFiled
                //console.log(res)
                //使用循环遍历，给下拉列表赋值
                $("#tableFiledB").empty();
                $("#tableFiledB").append("<option value='0' selected >" +"请选择字段名"+"</option>")
                $.each(res, function (index, value) {
                    $('#tableFiledB').append(new Option(value,index+1));// 下拉菜单里添加元素
                });
                layui.form.render("select");//重新渲染 固定写法
            }
            doLongTimeAjaxService("../auto/getAllTableFiled","json",callback,tableName)
        });

        //根据表名查找所有数据
        form.on('submit(getData)', function(data){
            // $(".tabRight").remove();
            var col =[]
            // var text =  $("#findAllTableName").find("option:selected").text();
            var arr_box = [];
            $('input[type=checkbox]:checked').each(function() {
                arr_box.push($(this).val());
            });
            // console.log(arr_box[0])
            if(arr_box.length>1||arr_box.length==0){
                layer.msg("查询,请选择一个表名!!!",{icon:5,time:2000})
                return;
            }
            var param = {
                "tableName": arr_box[0]
            }
            var callback = function(result){
                res = result.data
                //console.log(res);
                //console.log(res[0])
                $.each(res[0], function (index, obj) {
                    col.push({field: index, title: index,align:'center' })
                })
                var contentTableData
                createTable(col,arr_box[0])
            }
            doLongTimeAjaxService("../auto/getAllData","json",callback,param)
        });

        //根据表名批量删除
        form.on('submit(removeTable)', function(data){
            var arr_box = [];
            $('input[type=checkbox]:checked').each(function() {
                arr_box.push($(this).val());
            });
            // console.log(arr_box.toLocaleString())
            if(arr_box.length<=0){
                layer.msg("请选择表名!!!",{icon:5,time:2000})
                return;
            }
            var param = {
                "tableName": arr_box.toString()
            }
            var callback = function(result){
                // console.log("deleteTable",result)
                if(result.code==0){
                    layer.msg("删除表成功",{icon:6,time:2000})
                }
                $("#findAllTableName").empty();
                form.render("checkbox");
                initSelect()
            }
            doLongTimeAjaxService("../auto/deleteTable","json",callback,param)
        });

        //清空指定表的数据
        form.on('submit(removeData)', function(data){
            var arr_box = [];
            $('input[type=checkbox]:checked').each(function() {
                arr_box.push($(this).val());
            });
            // console.log(arr_box[0])
            if(arr_box.length>1||arr_box.length==0){
                layer.msg("清空数据,请选择一个表名!!!",{icon:5,time:2000})
                return;
            }
            var param = {
                "tableName": arr_box[0]
            }
            var callback = function(result){
                // console.log("removeData",result)
                if(result.code==0){
                    layer.msg("清空表数据成功",{icon:6,time:2000})
                    // doLongTimeAjaxService("../auto/getAllData","json",callback,param)
                }
            }
            doLongTimeAjaxService("../auto/removeTableData","json",callback,param)
        });
    });
        //清空输入框数据
        $("#resetBtn").click(function () {
            $(".test").find("input").each(function (index,item) {
                $(item).val("")
            })
            $("#tableColA").val("")
            $("#tableColB").val("")
        })

    function addExcel(){
        var html='<div class="layui-upload-drag" style="width:85%;" id="uploadFile"> <i class="layui-icon"></i> ';
            html+='<p>点击上传，或将文件拖拽到此处<br><span style="font-size:12px;">请上传excel文件</span></p>';
            html+='<div class="layui-hide" id="uploadDemoView"><hr> <img src="" alt="上传成功后渲染" style="max-width: 196px"></div> <span id="upFileName"></span> </div> ';
        $("#removetd").append(html)
        var a ='<div class="layui-col-md12" style="margin-top:20px;" id="buttomGroup">';
            a+='<div class="layui-col-md3 pull-right" style="margin-left:430px" >';
            a+='<div class="layui-col-md6" >';
            a+='<button  type="button" id="createTableBtn"  class="layui-btn layui-btn-normal">确定</button>';
            a+='</div>';
            a+='<div class="layui-col-md6" >';
            a+='<button  type="button" id="closeTableBtn"  onclick="closeTable();" class="layui-btn layui-btn-primary">取消</button>';
            a+='</div> ';
            a+='</div> ';
            a+='</div> ';
        $("#removetdBottom").append(a)
        layer.open({
            title:"导入数据",
            area:["600px","400px"],
            type: 1,
            offset:'auto',
            id: 'addtaskPanel', //防止重复弹出
            // content:html,
            content:$("#addExcelModal"),
            btnAlign: 'c', //按钮居中
            shade: 0, //不显示遮罩
            success:function(){
                $("#createTableBtn").click(function(){
                    // var tableName=$("#add_tableName").val();
                    // $("#createTableBtn").unbind('click')//清空点击事件
                    var tableName=$("#addExeclData").find("option:selected").text();
                    if(tableName==null||tableName.trim().length==0||tableName=='请选择表名'){
                        layer.msg("请选择要导入的表名",{icon:5,time:2000})
                        return;
                    }
                    var fileName=$("#upFileName").html();
                    if(fileName==null||fileName.trim().length==0){
                        layer.msg("请上传excel文件!",{icon:5,time:2000})
                        return;
                    }
                });
                //拖拽上传
                // var uploadRender = upload.render();
                upload.render({
                    elem: '#uploadFile'
                    ,auto: false//自动提交关闭
                    ,accept: 'file' //普通文件
                    // ,exts: 'apk' //只允许上传APK
                    ,exts: 'xls|xlsx' //只允许上传APK
                    ,url: "../auto/addAutoData" //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    ,bindAction: '#createTableBtn'
                    ,data: {
                        tablename: function(){
                            var tablename=$("#addExeclData").find("option:selected").text();
                            return tablename;
                        }
                    }
                    ,choose: function(obj){//// 选择文件回调
                        // uploadRender.config.elem.next()[0].value = '';
                        obj.preview(function(index, file, result){
                            $("#upFileName").html(file.name);
                        });
                    }
                    ,done: function(res){
                        // console.log(res);
                        if(res.code==0){
                            // $("#upFileName").html("");
                            $('#addExeclData').find("option[value=0]").attr("selected",true);
                            form.render('select');
                            createAllTable()
                            closeTable()
                            // location.reload()
                            layer.msg(res.message,{icon:6,time:2000})
                        }else{
                            layer.msg(res.message,{icon:5,time:2000})
                        }
                    }
                });
            },
            end: function () {
                $("#uploadFile").remove()
                $("#buttomGroup").remove()
                document.getElementById("addExcelModal").style.display="none";//隐藏
            }
        });
    }
    //关闭窗口
    function closeTable(){
        // $("#upFileName").html("");
       /* $('#addExeclData').find("option[value=0]").attr("selected",true);
        form.render('select');*/
        $("#uploadFile").remove()
        $("#buttomGroup").remove()
        document.getElementById("addExcelModal").style.display="none";//隐藏
        layer.closeAll();
    }


    //创建表格
    function  createTable(col,typeName) {
        // var typeName = $("#selectAllData").val()
        // var typeName = $("#findAllTableName").find("option:selected").text();
        var params = {
            "tableName" :  typeName
        }
        var index = layer.load(0);
        table.render({
            // elem:"#dataTable",
            elem:"#dataTableByName",
            method:"post",
            // id:"dataTable",
            id:"dataTableByName",
            skin:"nob",
            page: {
                layout: ['count','prev', 'page', 'next', 'limit' ],
                groups: 5,
            },
            limit:10,
            limits:[10,20,30,40],
            url:"../auto/getAllData",
            where:params,
            /*title:"表格数据",
            toolbar : '#toolbarSelectData',	//壹
            defaultToolbar: ['filter'], 	//贰*/
            cols:[ col
             ],
            done:function (res,curr,count) {
                $("table").css("width", "100%")
                $("div[lay-id='dataTableId']").css("border-color","#ffffff")
                $('th').css({'background-color':'#deeef6'})
                $(".layui-table-page").css("text-align",'right')
                var next = this.elem.next()
                res.data.forEach(function (item,index) {
                    if (index % 2 == 0){
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#fcfcfe")
                    }else {
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#f1f8fb")
                    }
                })
                layer.close(index)
            }
        })
    }
    $(function() {// 初始化内容
        initSelect()
        createAllTable()
    });

    function createAllTable() {
        // var index = layer.load(0)
        table.render({
            elem:"#getAllTable",
            method:"post",
            id:"getAllTable",
            // skin:"nob",
            page: {
                layout: ['count','prev', 'page', 'next', 'limit' ],
                groups: 5,
            },
            limit:10,
            limits:[10,20,30,40],
            url:"../auto/getTableData",
            /*  toolbar : true,	//壹
              defaultToolbar: ['exports'], 	//贰*/
            cols:[ [
                {field: 'name', align:"center", title: '表名', fixed: 'left'},
                {field: 'row', align:"center", title: '数据条数',fixed: 'left'},
                {fixed: 'right', align:"center", title: '操作',fixed: 'left',templet:function (data) {

                        return '<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>' +
                            '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>' +
                            '<a class="layui-btn layui-btn-xs" lay-event="edit">清空</a>'
                    }}
            ] ],
            done:function (res,curr,count) {
                $("table").css("width", "100%")
                $("div[lay-id='dataTableId']").css("border-color","#ffffff")
                $('th').css({'background-color':'#deeef6'})
                $(".layui-table-page").css("text-align",'right')
                var next = this.elem.next()
                res.data.forEach(function (item,index) {
                    if (index % 2 == 0){
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#fcfcfe")
                    }else {
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#f1f8fb")
                    }
                })
                // layer.close(index)
            }
        })
    }

   /* var html = '<div class="tabRight">';
        html += '<div class="layui-row layui-col-md12">';
        html += '<span style="font-size: 20px;color: #333333">表b:</span>';
        html += ' </div>';
        html += '<div class="layui-row" >';
        html += '<table class="layui-table" id="dataTableRight" lay-filter="tableDataRight" lay-data="{id:\'tableIdRight\'}">';
        html += '</table>';
        html += '</div>';
        html += '</div>';*/
    function queryData() {
        // $(".tableRight").append(html);
        var tableNameOne = $("#tableNameOne").find("option:selected").text();
        var tableNameTwo = $("#tableNameTwo").find("option:selected").text();
        var tableColA = $("#tableFiledA").find("option:selected").text();
        var tableColB = $("#tableFiledB").find("option:selected").text();
        if(tableNameOne=='请选择表名'||tableNameTwo=='请选择表名'||tableColA=='请选择字段名'||tableColB=='请选择字段名'){
            layer.msg("请输入查询的所有条件!",{icon:5,time:2000})
        }else{
            queryDataLeft()
            queryDataRight()
            layer.open({
                type:1,
                area:['1182px','515px'],
                fix: false,
                maxmin: true,
                shade: 0.6,
                title: ["关联查询结果如下:"],
                content: $("#layerSelectDataDifferent"),
                success: function (res) {
                    res.find('.layui-layer-min').remove()
                },
                end: function (res) {
                    $('#layerSelectDataDifferent').css("display","none")
                }
            })
        }


    }
    //比对查询表中所有内容
    function queryDataSame() {
        // $(".tabRight").remove();
        var col =[]
        var tableNameOne = $("#tableNameOne").find("option:selected").text();
        var tableNameTwo = $("#tableNameTwo").find("option:selected").text();
        var tableColA = $("#tableFiledA").find("option:selected").text();
        var tableColB = $("#tableFiledB").find("option:selected").text();
        var param = {
            "tableNameOne": tableNameOne,
            "tableNameTwo": tableNameTwo,
            "fieldOne": tableColA,
            "fieldTwo": tableColB
        }
        if(tableNameOne=='请选择表名'||tableNameTwo=='请选择表名'||tableColA=='请选择字段名'||tableColB=='请选择字段名'){
            layer.msg("请输入查询的所有条件!",{icon:5,time:2000})
            return;
        }

        var callback = function(result){
            res = result.data
            console.log(res);
            //console.log(res[0])
            $.each(res[0], function (index, obj) {
                col.push({field: index, title: index,align:'center' })
            })
            createQueryTable(col)
            layer.open({
                type:1,
                area:['1182px','515px'],
                fix: false,
                maxmin: true,
                shade: 0.6,
                title: ["比对查询结果如下:"],
                content: $("#layerSelectDataSame"),
                success: function (res) {
                    res.find('.layui-layer-min').remove()
                },
                end: function (res) {
                    $('#layerSelectDataSame').css("display","none")
                }
            })

        }
        doLongTimeAjaxService("../auto/getAssociatedQueryData","json",callback,param)
    }
    //比对查询创建表
    function  createQueryTable(col) {
        var tableNameOne = $("#tableNameOne").find("option:selected").text();
        var tableNameTwo = $("#tableNameTwo").find("option:selected").text();
        var tableColA = $("#tableFiledA").find("option:selected").text();
        var tableColB = $("#tableFiledB").find("option:selected").text();
        var param = {
            "tableNameOne": tableNameOne,
            "tableNameTwo": tableNameTwo,
            "fieldOne": tableColA,
            "fieldTwo": tableColB
        }
        var index = layer.load(0);
        table.render({
            elem:"#dataTable",
            method:"post",
            id:"dataTable",
            skin:"nob",
            page: {
                layout: ['count','prev', 'page', 'next', 'limit' ],
                groups: 5,
            },
            limit:10,
            limits:[10,20,30,40],
            url:"../auto/getAssociatedQueryData",
            where:param,
            cols:[ col
            ],
            done:function (res,curr,count) {
                $("table").css("width", "100%")
                $("div[lay-id='dataTableId']").css("border-color","#ffffff")
                $('th').css({'background-color':'#deeef6'})
                $(".layui-table-page").css("text-align",'right')
                var next = this.elem.next()
                res.data.forEach(function (item,index) {
                    if (index % 2 == 0){
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#fcfcfe")
                    }else {
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#f1f8fb")
                    }
                })
                layer.close(index)
            }
        })
    }


    //关联查询表中所有内容 左连接
    function queryDataLeft() {
        var col =[]
        var tableNameOne = $("#tableNameOne").find("option:selected").text();
        var tableNameTwo = $("#tableNameTwo").find("option:selected").text();
        var tableColA = $("#tableFiledA").find("option:selected").text();
        var tableColB = $("#tableFiledB").find("option:selected").text();
        var param = {
            "tableNameOne": tableNameOne,
            "tableNameTwo": tableNameTwo,
            "fieldOne": tableColA,
            "fieldTwo": tableColB
        }
        if(tableNameOne=='请选择表名'||tableNameTwo=='请选择表名'||tableColA=='请选择字段名'||tableColB=='请选择字段名'){
            layer.msg("请输入查询的所有条件!",{icon:5,time:2000})
            return;
        }

        var callback = function(result){
            res = result.data
            console.log(res);
            //console.log(res[0])
            $.each(res[0], function (index, obj) {
                col.push({field: index, title: index,align:'center' })
            })
            createQueryTableLeft(col)
        }
        doLongTimeAjaxService("../auto/getAssociatedQueryDataLeft","json",callback,param)
    }
    //关联查询创建表
    function  createQueryTableLeft(col) {
        var tableNameOne = $("#tableNameOne").find("option:selected").text();
        var tableNameTwo = $("#tableNameTwo").find("option:selected").text();
        var tableColA = $("#tableFiledA").find("option:selected").text();
        var tableColB = $("#tableFiledB").find("option:selected").text();
        var param = {
            "tableNameOne": tableNameOne,
            "tableNameTwo": tableNameTwo,
            "fieldOne": tableColA,
            "fieldTwo": tableColB
        }
        var index = layer.load(0);
        table.render({
            elem:"#dataTableLeft",
            method:"post",
            id:"dataTableLeft",
            skin:"nob",
            page: {
                layout: ['count','prev', 'page', 'next', 'limit' ],
                groups: 5,
            },
            limit:10,
            limits:[10,20,30,40],
            url:"../auto/getAssociatedQueryDataLeft",
            where:param,
            cols:[ col
            ],
            done:function (res,curr,count) {
                $("table").css("width", "100%")
                $("div[lay-id='dataTableId']").css("border-color","#ffffff")
                $('th').css({'background-color':'#deeef6'})
                $(".layui-table-page").css("text-align",'right')
                var next = this.elem.next()
                res.data.forEach(function (item,index) {
                    if (index % 2 == 0){
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#fcfcfe")
                    }else {
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#f1f8fb")
                    }
                })
                layer.close(index)
            }
        })
    }

    //关联查询表中所有内容  Right连接
    function queryDataRight() {
        var col =[]
        var tableNameOne = $("#tableNameOne").find("option:selected").text();
        var tableNameTwo = $("#tableNameTwo").find("option:selected").text();
        var tableColA = $("#tableFiledA").find("option:selected").text();
        var tableColB = $("#tableFiledB").find("option:selected").text();
        var param = {
            "tableNameOne": tableNameOne,
            "tableNameTwo": tableNameTwo,
            "fieldOne": tableColA,
            "fieldTwo": tableColB
        }
        if(tableNameOne=='请选择表名'||tableNameTwo=='请选择表名'||tableColA=='请选择字段名'||tableColB=='请选择字段名'){
            layer.msg("请输入查询的所有条件!",{icon:5,time:2000})
            return;
        }

        var callback = function(result){
            res = result.data
            console.log(res);
            //console.log(res[0])
            $.each(res[0], function (index, obj) {
                col.push({field: index, title: index,align:'center' })
            })
            createQueryTableRight(col)
        }
        doLongTimeAjaxService("../auto/getAssociatedQueryDataRight","json",callback,param)
    }
    //关联查询创建表
    function  createQueryTableRight(col) {
        var tableNameOne = $("#tableNameOne").find("option:selected").text();
        var tableNameTwo = $("#tableNameTwo").find("option:selected").text();
        var tableColA = $("#tableFiledA").find("option:selected").text();
        var tableColB = $("#tableFiledB").find("option:selected").text();
        var param = {
            "tableNameOne": tableNameOne,
            "tableNameTwo": tableNameTwo,
            "fieldOne": tableColA,
            "fieldTwo": tableColB
        }
        var index = layer.load(0);
        table.render({
            elem:"#dataTableRight",
            method:"post",
            id:"dataTableRight",
            skin:"nob",
            page: {
                layout: ['count','prev', 'page', 'next', 'limit' ],
                groups: 5,
            },
            limit:10,
            limits:[10,20,30,40],
            url:"../auto/getAssociatedQueryDataRight",
            where:param,
            cols:[ col
            ],
            done:function (res,curr,count) {
                $("table").css("width", "100%")
                $("div[lay-id='dataTableId']").css("border-color","#ffffff")
                $('th').css({'background-color':'#deeef6'})
                $(".layui-table-page").css("text-align",'right')
                var next = this.elem.next()
                res.data.forEach(function (item,index) {
                    if (index % 2 == 0){
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#fcfcfe")
                    }else {
                        var tr = next.find(".layui-table-box tbody tr[data-index='"+index+"']").css("background-color","#f1f8fb")
                    }
                })
                layer.close(index)
            }
        })
    }

    // doLongTimeAjaxService("../auto/getAssociatedQueryData","json",callback,param)
    function initSelect() {
        // createAllTable()
        var callback = function(result){
            res = result.data.table
            //console.log(res);//下面会提到这个data是什么值
            //使用循环遍历，给下拉列表赋值
            $.each(res, function (index, value) {
                $('#findAllTableName').append('<input type="checkbox"  name="labelType"  value="' + value + '" title="' + value + '">');// 下拉菜单里添加元素
                $('#tableNameOne').append(new Option(value,index+1));// 下拉菜单里添加元素
                $('#tableNameTwo').append(new Option(value,index+1));// 下拉菜单里添加元素
                $('#addExeclData').append(new Option(value,index+1));// 下拉菜单里添加元素
            });
            // createAllTable()
            layui.form.render("select");//重新渲染 固定写法
            layui.form.render("checkbox");
        }
        doLongTimeAjaxService("../auto/getAllTableName","json",callback)
    }



  /*  $("#hh").click(function(){
        console.log("ggg")
    });*/

</script>
</body>
</html>
